import React from 'react';
import 'antd/dist/antd.css';
import {Menu, Button, Layout} from 'antd';
import {
    PieChartOutlined, MailOutlined,} from '@ant-design/icons';
import {router} from "../router";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";


const { SubMenu } = Menu;
const { Header, Footer, Sider, Content } = Layout;

function User() {
    return (
        <div >
            <Router>
                <Layout>
                    <Layout>
                        <Sider>
                            <div style={{width:200}}>
                            <Menu
                                defaultSelectedKeys={['1']}
                                defaultOpenKeys={['sub1']}
                                mode="inline"
                                theme="dark"
                            >{
                                router.map((r,index)=>{
                                    if (r.children){
                                        return (
                                            <SubMenu key={r.id} title={r.title} icon={<MailOutlined />} >
                                                {
                                                    r.children.map((r1,index) =>(
                                                        <Menu.Item key={r1.id} >
                                                            <Link to={r1.path}>{r1.title}</Link>
                                                        </Menu.Item>
                                                    ))
                                                }
                                            </SubMenu>
                                        )
                                    }else {
                                        return (
                                            <Menu.Item key={r.id} icon={<PieChartOutlined />}>
                                                option1
                                                <Link to={r.path}>{r.title}</Link>
                                            </Menu.Item>
                                        )
                                    }
                                })
                            }
                            </Menu>
                        </div>
                        </Sider>
                        <Content>
                            <Switch>
                                {
                                    router.map((r,index) =>{
                                        if (r.children){
                                            return (
                                                <Route path={r.path} exact={r.exact} key={r.id}>
                                                    {r.component}
                                                    <Switch  key={r.id}>
                                                        {
                                                            r.children.map((r1,index) =>{
                                                                return (
                                                                    <Route key={r1.id} path={r1.path} exact={r1.exact}>
                                                                        {r1.component}
                                                                    </Route>
                                                                )
                                                            })
                                                        }
                                                    </Switch>
                                                </Route>
                                            )
                                        }else {
                                            return (
                                                <Route key={r.id} path={r.path} exact={r.exact}>
                                                    {r.component}
                                                </Route>
                                            )
                                        }
                                    })
                                }
                            </Switch>
                        </Content>
                    </Layout>
                    <Footer>Footer</Footer>
                </Layout>
            </Router>
        </div>
    );
}

export default User;
